<template>
    <div class="contain">
        <el-page-header @back="goBack"></el-page-header>
        <div class="tab">
            <el-tabs type="border-card" v-model="activeName">
                <el-tab-pane label="二级菜单" name="menu" style='background-color:white'>
                    <div class="down-form">
                        <div class="table">
                            <el-table ref="logTable" :data="tableData" v-loading="loading" stripe border
                                :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
                                style="width: 100%;font-size: 14px;color: #1f2d3d">
                                <el-table-column type="index" label="编码" align="center" width="150">
                                </el-table-column>
                                <el-table-column prop="title" label="菜单名称" min-width="13%" show-overflow-tooltip
                                    align="center">
                                </el-table-column>
                                <el-table-column prop="prentId" label="菜单级别" :formatter="typeFormatter" min-width="13%"
                                    align="center">
                                </el-table-column>
                                <el-table-column prop="desc" label="菜单描述" min-width="18%" show-overflow-tooltip
                                    align="center">
                                </el-table-column>
                                <el-table-column prop="" label="操作" min-width="19%" align="center">
                                    <template slot-scope="scope">
                                        <div style="display: flex;margin-left: 3px">
                                            <el-button :plain="true" size="mini" type="primary" disabled
                                                @click="handleDetail(scope.row)"><i
                                                    class="el-icon-zoom-in"></i>查看下一级</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="block">
                            <el-pagination @current-change="handleCurrentChange"
                                layout="total, sizes,prev, pager, next, jumper" :current-page.sync="iPagination.current"
                                :page-size='iPagination.pageSize' :page-sizes="iPagination.pageSizeOptions"
                                :total="iPagination.total" @size-change="handleSizeChange">
                            </el-pagination>
                        </div>
                        <!-- <poster-dialog ref="posterDialog"></poster-dialog> -->
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    name: "menuSecond",
    data() {
        return {
            activeName: 'menu',
            tableData: [],
            iPagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: [7, 10, 20, 50],
                total: 0,
                "page": 0,
                "pageSize": 10,
            },
            loading: false,
        }
    },
    mounted() {
        this.getSecondMenu()
    },
    methods: {
        // 分页导航
        handleSizeChange(val) {
            this.iPagination.pageSize = val;
            this.getSecondMenu()
        },
        handleCurrentChange(val) {
            this.iPagination.current = val;
            this.getSecondMenu()
        },
        // 获取上一级传来的id
        getParams() {
            this.prentId = this.$route.query.prentId;
            let data = {
                prentId: this.prentId,
                currPage: this.iPagination.current - 1,
                pageNum: this.iPagination.pageSize
            }
            return data
        },

        // 获取二级菜单列表
        getSecondMenu() {
            this.loading = true;
            this.$Axios({
                url: '/admin/getMenuData',
                method: 'get',
                data: this.getParams(),
                success: (result) => {
                    this.tableData = result.data;
                    this.iPagination.total = result.total;
                    this.$message({
                        message: '获取菜单信息成功',
                        type: 'success',
                        duration: 2000
                    });
                    setTimeout(() => {
                        this.loading = false;
                    }, 200);
                }
            })
        },
        // 返回
        goBack() {
            this.$router.go(-1)
        },

        // 级别转文字
        typeFormatter(row, column) {
            const prentId = row.prentId
            if (prentId == 0) {
                return '一级'
            } else {
                return '二级'
            }
        },

    }
}
</script>

<style scoped>
.tab {
    margin-top: 15px;
}

.block {
    float: right;
    margin-top: 10px;
}

.el-button {
    width: 32%;
    margin-left: 34%;
}

::deep .el-page-header__left::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
}

::deep .el-icon-back {
    font-weight: bold;
}

::deep .el-page-header__title {
    font-size: 14px;
    font-weight: bold;
}
</style>